<template>
  <div>
    <template v-if="templateStyle == 1">
      <open-modal :openModal='showRelData' @closeModal='clickShowRelData'>
        <div class="masker-content c-br-tl20 c-br-tr20 c-p c-pt24">
          <div class="c-fs28 c-fc-xblack c-ph24 c-pb6 c-textAlign-c">套餐</div>
          <span @click="clickShowRelData" class="iconfont c-pa c-p-t30 c-p-r24 c-fc-sgray c-fs20 c-flex-row c-flex-center">&#xeca0;</span>
          <div class="content-scroll">
            <div class="c-ph24" v-if="relData && relData.length > 0">
              <div class="c-flex-row c-pv24 c-bd-b1" @click="clickItem(item)" v-for="(item,index) in relData" :key="index">
                <div class="c-ww150 c-maxh100 c-text-hidden c-p c-br4">
                  <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :fontClass="{
                    boxStyle: 'c-pt30 c-pb48 c-pl12',
                    name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                    duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}" v-if="item.cover && (item.cover.coverType==1 || item.cover.coverType==2)" />
                  <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt="">
                  <div class="c-pa c-br4 c-p-b8 c-p-r8 c-inlineblack">
                    <div class="c-hh28 c-lh28 c-textAlign-c c-translucent-balck60"><span class="c-fs20 c-fc-white c-ph4 c-block c-vcAlign-middle">{{prodTypeMap[item.prodType]}}</span></div>
                  </div>
                </div>
                <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-justify-sb">
                  <div class="c-fs22 c-text-ellipsis2">{{item.name}}</div>
                  <div class="theme-fc c-fs20">
                    <span v-if="item.price && item.payType== 2">{{'￥' | iosPriceFilter}}</span>
                    <span>{{item.payType | priceValueFilter(item.price, item.prodType)}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </open-modal>
    </template>
    <template v-if="templateStyle == 2">
      <div v-if="relData && relData.length > 0">
        <div class="c-flex-row c-pv24 c-bd-b1" @click="clickItem(item)" v-for="(item,index) in relData" :key="index">
          <div class="c-ww210 c-hh140 c-text-hidden c-p c-br16">
            <vip-custom-img :cover="item.cover" :isBlur="true" :imgClass="'imgCloseBig'" :fontClass="{
              boxStyle: 'c-pt30 c-pb48 c-pl12',
              name: 'c-fs32 c-text-ellipsis1 c-fw-b',
              duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}" v-if="item.cover && (item.cover.coverType==1 || item.cover.coverType==2)" />
            <CoverImg v-else :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" />
            <div class="c-pa c-br4 c-p-b8 c-p-r8 c-inlineblack c-pz10">
              <div class="c-br-tl4 c-hh28 c-lh28 c-textAlign-c c-translucent-balck60"><span class="c-fs20 c-fc-white c-ph4 c-block c-vcAlign-middle">{{prodTypeMap[item.prodType]}}</span></div>
            </div>
          </div>
          <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-justify-sb">
            <div class="c-fs22 c-text-ellipsis1">{{item.name}}</div>
            <div class="c-fc-gray c-text-decoration-through c-fs20">
              <span v-if="item.price && item.payType== 2">{{'￥' | iosPriceFilter}}</span>
              <span>{{item.payType | priceValueFilter(item.price, item.prodType)}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="templateStyle == 3">
      <div v-if="relData && relData.length > 0">
        <div class="c-flex-row c-pv24 c-bd-b1" @click.stop="clickItem(item)" v-for="(item,index) in relData" :key="index">
          <div class="c-ww110 c-maxh72 c-text-hidden c-p c-br4">
            <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :fontClass="{
              boxStyle: 'c-pt30 c-pb48 c-pl12',
              name: 'c-fs32 c-text-ellipsis1 c-fw-b',
              duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}" v-if="item.cover && (item.cover.coverType==1 || item.cover.coverType==2)" />
            <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt="">
            <div class="c-pa c-br4 c-p-b8 c-p-r8 c-inlineblack c-pz10">
              <div class="c-br-tl4 c-hh28 c-lh28 c-textAlign-c c-translucent-balck60"><span class="c-fs20 c-fc-white c-ph4 c-block c-vcAlign-middle">{{prodTypeMap[item.prodType]}}</span></div>
            </div>
          </div>
          <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-justify-sb">
            <div class="c-fs22 c-text-ellipsis1"><span class="theme-fc theme-bd1 c-br4 c-lh28 c-hh28 c-ph8 c-fs20 c-mr12">套餐</span>{{item.name}}</div>
            <div class="c-fs20 c-fc-gray c-text-decoration-through">
              <span v-if="item.price && item.payType== 2">{{'￥' | iosPriceFilter}}</span>
              <span>{{item.payType | priceValueFilter(item.price, item.prodType)}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import OpenModal from "@/components/templates/common/openModal.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { goDetails } from "@/utils/goDetails.js"
export default {
  name: "mallPackageList",
  components: {
    OpenModal,
    VipCustomImg,
    CoverImg
  },
  props: {
    relData: {
      type: Array,
      default: () => []
    },
    showRelData: {
      type: Boolean,
      default: false
    },
    templateStyle: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      cfrom: global.ckFrom,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      prodTypeMap: global.prodMapType
    };
  },
  created() {
  },
  activated() {
  },
  deactivated() {
  },
  mounted() {

  },
  methods: {
    clickShowRelData() {
      this.$emit('clickShowRelData')
    },
    clickItem(item) {
      let query = {};
      let type = [110, 111, 112].includes(item.prodType) ? this.cfrom.course : item.prodType;
      if ((type == this.cfrom.vip || type == this.cfrom.svip) && this.templateStyle == 1) {
        if (item.mtkType == 2) {
          query.isCollage = true;
        } else if (item.mtkType == 1) {
          query.isSales = true;
        } else if (item.mtkType == 12) {
          query.isBargain = true;
        }
      }
      goDetails(this, type, item.prodId, query, item.courseType);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.masker-content {
  background-color: #fff;
  max-height: 16rem;
  height: 16rem;
  width: 100%;
}
.content-scroll {
  height: 14rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
</style>


